<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="740px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改活动' : '添加活动'"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="票根:" prop="name">
        <el-input clearable v-model="form.name" placeholder="请输入卡券名称" />
      </el-form-item>

      <el-form-item label="价格:" prop="price">
        <el-input clearable v-model="form.price" placeholder="价格" />
      </el-form-item>
      <el-form-item label="描述:" prop="desc">
        <tinymce-editor v-model="form.desc" :init="editorConfig" />
      </el-form-item>

      <el-form-item label="优惠券:" prop="consume_id">
        <el-select
          v-model="form.consume_id"
          multiple
          placeholder="选择优惠券"
          @change="selYhj"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="活动开始时间:" prop="start_time">
        <el-date-picker
          v-model="form.start_time"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="活动结束时间:" prop="end_time">
        <el-date-picker
          v-model="form.end_time"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
import { add, update } from '@/api/ticket';
import { consumerAll } from '@/api/consumer';
import {  query } from '@/api/system/config';
import TinymceEditor from '@/components/TinymceEditor';
const DEFAULT_FORM = {
  id: 0,
  name: '',
  start_time: '',
  end_time: '',
  desc: '',
  consume_id: [],
  price: ''
};

export default {
  components: { TinymceEditor, consumerAll,query },
  name: 'OpenEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },

  data() {
    return {
      start_time: '',
      end_time: '',
      // 表单数据
      num: 1,
      value1: [],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
        key_map: '',

      form: { ...DEFAULT_FORM },
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入卡券名称',
            trigger: 'blur'
          }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      editorConfig: {
        height: 525,
        relative_urls: false,
        convert_urls: false,
        images_upload_handler: (blobInfo, success, error) => {
          const file = blobInfo.blob();
          // 使用 axios 上传，实际开发这段建议写在 api 中再调用 api
          const formData = new FormData();
          formData.append('file', file, file.name);
          request({
            url: '/common/uploadFile',
            method: 'post',
            data: formData,
            onUploadProgress: (e) => {
              // 文件上传进度回调
            }
          })
            .then((res) => {
              if (res.data.code === 0) {
                success(res.data.data.url);
              } else {
                error(res.data.message);
              }
            })
            .catch((e) => {
              error('exception');
            });
        }
      }
    };
  },
  created() {
    this.consumer();
    this.configquery();
  },

  methods: {
    /* 保存编辑 */

    handleChange(value) {},

    delList(index) {
      this.multiLensList.splice(index, 1);
    },

    consumer() {
      const loading = this.$loading({ lock: true });
      consumerAll()
        .then((msg) => {
        

          this.options = msg.list.map((item) => {
            return {
              value: item.id,
              label:
                item.storeInfo.store_name +
                '--满' +
                item.satisfy_amount +
                '减' +
                item.deductible_amount
            };
          });

          loading.close();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },

    
    configquery() {
      const loading = this.$loading({ lock: true });
      query({ group: 'site' })
        .then((msg) => {
  
       this.key_map =msg['map_key']
          loading.close();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },

    selYhj(e) {},

    save() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }

        this.loading = true;
        const data = {
          ...this.form
        };

        const saveOrUpdata = this.isUpdate ? update : add;

        saveOrUpdata(data)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.updateVisible(false);
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  },
  watch: {
    visible(visible) {
      this.consumer();
      if (visible) {
        if (this.data) {
          this.$util.assignObject(this.form, {
            ...this.data
          });
          this.isUpdate = true;
        } else {
          this.isUpdate = false;
        }
      } else {
        this.$refs['form'].clearValidate();
        this.form = { ...DEFAULT_FORM };
      }
    }
  }
};
</script>
